<template>
	<div style="height: 300px">
		<dui-pie-chart :items="basicItems"  :height="300" :autoplay="true" :interval="3000" @change="onSwiperChange" @click="onSwiperClick"></dui-pie-chart>

		<!-- <dui-appoint-date-v2 v-model="visible" :timePeriodData="timePeriodData"></dui-appoint-date-v2> -->

		<dui-float-ball @touchFunc="touchFunc" :position="{ left: '20px' }" :needNearEdge="false"></dui-float-ball>
	</div>
</template>

<script>
export default {
	data() {
		return {
			basicItems: [
				{
					image: 'https://picsum.photos/600/300?random=1',
					title: '美丽风景1',
					description: '这是第一张美丽的风景图片'
				},
				{
					image: 'https://picsum.photos/600/300?random=2',
					title: '美丽风景2',
					description: '这是第二张美丽的风景图片'
				},
				{
					image: 'https://picsum.photos/600/300?random=3',
					title: '美丽风景3',
					description: '这是第三张美丽的风景图片'
				}
			],
			visible: true,
			timePeriodData: [
				{
					disabled: false,
					time_period: '9:00-11:00'
				},
				{
					disabled: false,
					time_period: '11:00-13:00'
				},
				{
					disabled: false,
					time_period: '13:00-15:00'
				},
				{
					disabled: false,
					time_period: '15:00-17:00'
				},
				{
					disabled: false,
					time_period: '17:00-19:00'
				},
				{
					disabled: false,
					time_period: '19:00-21:00'
				}
			],
			option: {
				title: {
					text: '每周销量报表', //主标题
					// subText: '这里是副标题', //副标题
					textStyle: {
						// color: '#ff007f', //主标题颜色
						fontSize: 14, //主标题字体大小
						textAlign: 'center' //主标题水平对齐（可选值：'left'、'center'、'right')
					}
					// subTextStyle: {
					// 	color: '#7d7d7d', //副标题颜色
					// 	fontSize: 12, //副标题字体大小
					// 	textAlign: 'left' //副标题水平对齐（可选值：'left'、'center'、'right')
					// }
				},
				tooltip: {
					show: true //是否显示提示框组件
				},
				xAxis: {
					show: true, //是否显示x轴
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //x轴分类
				},
				yAxis: {
					show: true //是否显示y轴
				},
				series: [
					{
						//数据
						data: [
							{ value: 100, name: 'Search Engine' },
							{ value: 300, name: 'Direct' },
							{ value: 500, name: 'Email' },
							{ value: 200, name: 'Union Ads' },
							{ value: 200, name: 'IOIO' },
							{ value: 500, name: 'f8f8' },
							{ value: 200, name: 'f8f7' },
							{ value: 500, name: 'f8f6' }
						],
						type: 'pie', //类型
						radius: '50%' //饼状图半径
					}
				]
			}
		};
	},

	methods: {
		touchFunc(e) {
			console.log(e);
		},

		onSwiperChange(e) {
			console.log('轮播图切换到:', e.index, e.item);
		},

		onSwiperClick(e) {
			console.log('轮播图被点击:', e.index, e.item);
			uni.showToast({
				title: `点击了第${e.index + 1}张图片`,
				icon: 'none'
			});
		},

		handleCustomButtonClick(index) {
			uni.showToast({
				title: `点击了按钮 ${index + 1}`,
				icon: 'none'
			});
		}
	}
};
</script>
